import { useEffect } from 'react'

export function useResize({ id, height = 1080, needHeight = false }: any) {
    useEffect(() => {
        function resize() {
            setTimeout(() => {
                const innerHeight = window.innerHeight
                const el = document.getElementById(id)
                const scale = innerHeight / height

                if (el) {
                    el.style.transform = `scale(${scale})`
                    if (needHeight) {
                        el.style.height = `${(1 / scale) * 100}%`
                        el.style.transformOrigin = `top center`
                    }
                }
            }, 100)
        }
        resize()
        window.addEventListener('resize', () => resize())
        document.addEventListener('fullscreenchange', resize)
        document.addEventListener('webkitfullscreenchange', resize)

        return () => {
            window.removeEventListener('resize', resize)
            document.removeEventListener('fullscreenchange', resize)
            document.removeEventListener('webkitfullscreenchange', resize)
        }
    }, [])
}
